<template>
  <div>
    <div v-for="item in articleList" style="margin-left: 15px">
      <div style="font-size: 12px;width: 100%">
        <div style="display: inline-block" v-if="item.dynamicIdentification === 1">
          <div style="display: inline-block">发布了</div>
          <div v-if="item.articlePost === 2" style="display: inline-block">帖子</div>
          <div v-else style="display: inline-block">文章</div>
        </div>
        <div style="display: inline-block" v-if="item.dynamicIdentification === 2">
          <div style="display: inline-block">点赞了</div>
          <div v-if="item.articlePost === 2" style="display: inline-block">帖子</div>
          <div v-else style="display: inline-block">文章</div>
        </div>
        <div style="display: inline-block" v-if="item.dynamicIdentification === 3">
          <div style="display: inline-block">收藏了</div>
          <div v-if="item.articlePost === 2" style="display: inline-block">帖子</div>
          <div v-else style="display: inline-block">文章</div>
        </div>
        <div style="display: inline-block;float: right;margin-right: 20px">
          {{ item.articleCreatingTime }}
        </div>
      </div>
      <div style="margin-top: 4px;font-weight: bolder;font-size: 110%">
        <a @click="articleTitle(item.articleId)">
          {{ item.articleTitle }}
        </a>
      </div>
      <div class="articleContentDiv" v-html="transitionHtml(item.articleContent)" />
      <div v-if="item.articleFirstImage === (global.recommendImg+'/static/img/推荐.jpg')" />
      <div v-else>
        <el-image :src="item.articleFirstImage" style="width: 15%" />
      </div>
      <el-divider />
    </div>
    <div v-if="articleList.length === 0">
      <el-empty description="暂时没有记录哦" />
    </div>
  </div>
</template>

<script>
import TimeDisposal from "../../../../components/timeDisposal";
import request from "../../../../utils/request";
import {marked} from "marked";
import {gotoNewWindow} from "../../../../utils/sameMethod";
export default {
  name: "msgDynamic",
  data:function (){
    return{
      usersId:"",
      articleList:[],
      index:0,
      getDynamicState:true
    }
  },
  methods:{
    transitionHtml(content){
      return marked(content);
    },
    initDynamic(){
      request.get('/attention/selectUsersMsgDynamic/'+this.usersId+"/"+this.index).then((res =>{
        if(res.msg !== '没有动态'){
        this.articleList=this.articleList.concat(res.data);
        if (res.data.length < 2){
          this.getDynamicState=false
        }
        }else {
          this.getDynamicState=false
        }
      }))
    },
    handleScroll() {
      let top = Math.floor(window.pageYOffset)
      let totalLength=document.documentElement.scrollHeight * 0.01
      if (top >= totalLength && this.getDynamicState === true){
        this.getDynamicState=false;
        this.index=this.index+2;
        this.initDynamic();
        this.getDynamicState=true;
      }
    },
    articleTitle(articleId){
      gotoNewWindow(articleId,"content","detail");
    },
  },
  created() {
    this.usersId=this.$route.params.usersId;
  },
  mounted() {
    this.initDynamic()
    window.addEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}
.articleContentDiv{
  margin-top: 10px;
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
}
.articleContentDiv >>> img{
  display: none;
}
</style>